<template>
  <div class="login">
    <!-- 关闭按钮 -->
    <div class="back_btn">
      <span class="iconfont icon-guanbi"></span>
    </div>
    <!-- logo部分 -->
    <div class="logo">
      <span class="iconfont icon-new1"></span>
    </div>
    <!-- 输入框 -->
    <Authlput
      placeholder="用户名/手机号码"
      type="text"
      errMsg="请输入正确的手机号"
      @valChanged="setUsername"
      :rule="ruleUsername"
    />
    <Authlput
      placeholder="密码"
      type="password"
      errMsg="请输入三到九位的密码"
      @valChanged="setPassword"
      :rule="rulePassword"
    />
    <Submitbtn name="登录" @clicked="login" />
    <router-link to="/register">
      <Submitbtn name="注册" />
    </router-link>
  </div>
</template>

<script>
// 引入输入框组件
import Authlput from "../components/AuthInput";
// 引入按钮组件
import Submitbtn from "../components/submitbtn";
export default {
  data() {
    return {
      username: "",
      password: "",
      ruleUsername: "^\\d{5,11}$",
      rulePassword: "^.{3,9}$"
    };
  },
  // 注册组件
  components: {
    Authlput,
    Submitbtn
  },
  methods: {
    setUsername(username) {
      this.username = username;
    },
    setPassword(password) {
      this.password = password;
    },
    login() {
      // console.log("父组件接收到按钮子组件的点击事件, 触发自己的登录函数");
      // 登录请求就需要 用户名和密码的数据
      // 这里直接通过 this.username / this.password 拿到用户输入数据
      // console.log("用户名", this.username);
      // console.log("密码", this.password);
      if (!this.username || !this.password) {
        this.$toast.fail("请输入完整信息");
        return;
      }
      // 利用正则效验
      var regExpUsername = new RegExp(this.ruleUsername);
      if (!regExpUsername.test(this.username)) {
        this.$toast.fail("用户名格式错误");
        // 弹窗以后阻止继续操作, return
        return;
      }

      var regExpPassword = new RegExp(this.rulePassword);
      if (!regExpPassword.test(this.password)) {
        this.$toast.fail("密码格式错误");
        // 弹窗以后阻止继续操作, return
        return;
      }

      this.$axios({
        url: "/login",
        method: "POST",
        data: {
          username: this.username,
          password: this.password
        }
      })
        .then(res => {
          console.log(res);
          // 结构出需要的数据
          const { message, data } = res.data;
          if (message === "登录成功") {
            // 登录成功后将 token 和 用户 id 保存到本地
            localStorage.setItem("token", data.token);
            localStorage.setItem("userId", data.user.id);
            // 登录提示
            this.$toast.success(message);
            // 登录成功后跳转到首页
            this.$router.replace("/");
            //console.log(this);
          } else {
            this.$toast.fail(message);
          }
        })
        .catch(err => {
          console.log(err);
          this.$toast.success("404");
        });
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  padding: 20 /360 * 100vw;
  .back_btn span {
    font-size: 27 / 360 * 100vw;
  }
  .logo {
    text-align: center;
    margin: 50 /360 * 100vw 0;
    span {
      font-size: 40 / 360 * 100vw;

      color: #cc3300;
    }
  }
}
</style>
